<template>
  <div>
    <tablePaging v-if="getRouterType == 'pages'" :tableItem="tableItem" :operationItem="operationItem" ></tablePaging>
    <div class="theme-content" v-if="getRouterType == 'look' || getRouterType == 'edit'">
      <div class="theme-content-item padding-20px">
        <!-- 题目详情 -->
        <div v-if="getRouterType == 'look'">
          <div class="flex-jc-s-b" style="margin-bottom: 13px;">
            <div class="left-title">题目详情</div>
            <div>
            </div>
          </div>
          <div>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'multiple'">多选题</span>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'single'">单选题</span>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'judge'">判断题</span>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'case'">案例题</span>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'fillBlank'">填空题</span>
            <span class="labelIcon-primary" v-if="questionDetail.data.typeCode == 'shortAnswer'">简答题</span>
            <span class="margin-l-10px" v-html="questionDetail.data.content"></span>
          </div>
          <div class="optionListStyle" style="display: flex;align-items: center;flex-wrap: wrap;" v-for="item, index in questionDetail.data.optionList ">
            <span>{{ item.option }}.</span>
            <span class="margin-l-10px" v-html="item.content"></span>
          </div>
          <div 
            :style="questionDetail.data.optionList && questionDetail.data.optionList.length == 0 ? { 'margin-top': '14px' } : ''">
            <span style="margin-right:10px;color:#409eff">答案:</span>
            <span style="color:#409eff" v-html="questionDetail.data.answer"></span>
          </div>
          <div 
            :style="{ 'margin-top': '14px',display:'flex','align-items':'center'}">
            <span style="margin-right:10px">试题解析:</span>
            <span v-html="questionDetail.data.analysisContent"></span>
          </div>
        </div>
        <div style="position: absolute;bottom:15px;width:152px;left:50%;margin-left:-76px" class="flex-jc-s-b"  v-if="getRouterType == 'look'">
          <el-button style="margin:0" type="default"  @click="routerPages('', 'pages')" >返回</el-button>
          <el-button style="margin:0" v-hasPermi="[$button.trainbankQuestionedit || null]" type="primary"
            v-if="route.query.publishFlag != 1"  @click="routerPages('', 'edit')" >修改</el-button>
        </div>
        <!-- 题目修改 -->
        <questionEdit @backEdit="routerPages" v-if="getRouterType == 'edit'" />
      </div>
    </div>
  </div>
</template>
<script setup>
import tablePaging from '@/views/common/component/table-paging'
import questionEdit from '../../component/questionEdit'
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { tableItem, questionDetailApi } from './const.js'
import { Plus, Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from 'vue-router'
import $button from '@/button'
const route = useRoute()
const router = useRouter()
let questionDetail = reactive({ data: {} })
const routeQuery = reactive(route.query)
const getRouterType = ref('pages')
const operationItem = reactive({
  defaultSearch: true,//默认搜索按钮
  defaultRefresh: false,//默认重置按钮
  SearchText: "查询", //搜索文字 默认搜索
  RefreshText: "重置", //刷新文字 默认重置
  customTableHeader: true,//自定义表单头部插槽
  SearchItem: [
    {
      code: "content",
      name: "题目标题",
      type: 'input',
    },
    {
      code: "searchTypeInput",
      name: "题目类型",
      type: 'select',
      value: 'id',//value的值，默认是value
      label: 'name',//value的值，默认是label
      options: [
        {
          label: '单选题',
          value: 'single'
        },
        {
          label: '多选题',
          value: 'multiple'
        },
        {
          label: '判断题',
          value: 'judge'
        },
        {
          label: '案例题',
          value: 'case'
        },
        {
          label: '填空题',
          value: 'fillBlank'
        },
        {
          label: '简答题',
          value: 'shortAnswer'
        },
      ]
    },
  ],
  //   v-hasPermi="['monitor:job:export']"
  menuArray: []
})
watch(() => { return  route.query.courseParentId }, () => {
    // 数据变化之后的回调函数
   for (const key in tableItem.pageInfo['request']['pageDomain']) {
    if (key!='pageNum'&&key!='pageSize') {
      tableItem.pageInfo['request']['pageDomain'][key]=''
    }
   }
   tableItem.pageInfo['request']['pageDomain']['pageNum']=1
   tableItem.pageInfo['request']['pageDomain']['pageSize']=10
}, { })
onMounted(() => {
  route.query.type ? getRouterType.value = route.query.type : ''
  route.query.type == 'look' ? initDetail(route.query) : ''
  tableItem.pageInfo.request.bankId = route.query.courseParentId
  if (route.query.publishFlag == 1) {
    tableItem.btnArray[1].show = false
  } else {
    tableItem.btnArray[1].show = true
  }
  tableItem.pageInfo.paging()
})
const routerPages = (scope, type, editType) => {
  console.log(questionDetail, 'questionDetail')
  let row = scope || { id: null }
  router.replace({
    path: route.path,
    query: { courseParentId: routeQuery.courseParentId, id: row.id || route.query.id, type, back: route.query.type, publishFlag: routeQuery.publishFlag || 0 }
  })
  // 编辑保存触发刷新
  setTimeout(() => {
    getRouterType.value = type || 'look'
    if (editType == 'finishEdit') {
      route.query.type == 'look' ? questionDetailApi(route.query.id).then((res) => { questionDetail.data = res.data }) : ''
      route.query.type == 'pages' ? tableItem.pageInfo.paging() : ''
    }
  })
}
// 详情
const initDetail = (row) => {
  questionDetailApi(row.id || route.query.id).then((res) => {
    questionDetail.data = res.data
    routerPages(row, 'look')
  })
}
tableItem.btnArray[0].handle = (row) => {
  initDetail(row)
}
tableItem.btnArray[1].handle = (row) => {
  routerPages(row, 'edit')
}
</script>

<style lang="scss" scoped>
.theme-content-item {
  span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }
}

.optionListStyle {
  margin: 14px 0;

  span {}
}
</style>